<template>
  <div class="bgc">
    <div class="container">
        <div class="artist-main">
            <div class="artist-song">
                <div class="artist-title">
                    <div class="artist-info">
                        <h2>{{artistDec.name}}</h2>
                        <h3 v-if="artistDec.alias">{{artistDec.alias[0]}}</h3>
                    </div>
                    <img class="artist-img" :src="artistDec.picUrl" alt="">
                    <div class="mask-alpha">
                    <a href="" class="artist-home"></a> <a href="" class="artist-sub"></a>
                    </div>
                    <el-menu
    class="el-menu-demo"
    mode="horizontal"
    background-color="#e7e7e7"
    text-color="#333"
    router
    default-active="1"
  >
    <el-menu class="wangyi-title"></el-menu>
    <el-menu-item index="1" >热门作品</el-menu-item>
    <el-menu-item index="2">所有专辑</el-menu-item>
    <el-menu-item index="3">相关MV</el-menu-item>
    <el-menu-item index="4">艺人介绍</el-menu-item>
  </el-menu>
                </div>
                <div class="btn-group">
                    <a class="group-1" href=""><el-button class="btn-play" type="primary" size="mini" icon="el-icon-video-play"
                >播放</el-button><button class="btn-plus" type="primary" size="mini" ><i class=" el-icon-plus"></i></button></a>
                    <a class="group-2" href=""><el-button class="btn-sub" size="mini" icon="el-icon-folder-add"
                >收藏热门50</el-button
              ></a>
                    <a class="group-3" href=""><el-button size="mini" class="btn-hot">热门单曲<i class="el-icon-arrow-down el-icon--right"></i></el-button></a>
                </div>
                <div class="song-zebra">
                    <div class="songForm">
      <el-table
        ref="singleTable"
        :data="tableData"
        stripe
        highlight-current-row
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column label="" width="40">
          <template v-slot="{ row }">
            <span class="likeA"  @click="handleGotoPlay(row)">
              <i class="el-icon-caret-right">
              </i>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          property="name"
          width="280">
        </el-table-column>
        <el-table-column
          property="dt"
          width="90">
        </el-table-column>
        <el-table-column
          property="ar.name" width="90">
        </el-table-column>
        <el-table-column
          property="al.name" class="nowraphidden"
        show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
  </div>
</div>

      </div><div class="rightElements">
      <div class="similarArtistTitle">相似歌手</div>
      <div class="similarArtist">
          <div class="similarArtist-main" v-for="simiArtist in simiArtists" :key="simiArtist.id">
              <div class="main-img">
                  <img :src="simiArtist.picUrl" alt="" @click="handleToAnotherPlay(simiArtist.id)">
              </div>
              <p><span class="likeA" @click="handleToAnotherPlay(simiArtist.id)">{{simiArtist.name}}</span></p>
          </div>
      </div>
        <p class="downloadTitle">网易云音乐多端下载</p>
      <div class="download">
        <img src="../../assets/images/indexImages/ios.png"></img>
        <img src="../../assets/images/indexImages/pc.png"></img>
        <img src="../../assets/images/indexImages/android.png"></img>
      </div>
      <p class="downloadBottom">同步歌单，随时畅听320k好音乐</p>
      <a class="updateBottom" href="">补充或修改艺人资料></a>
    </div>

        </div>
      </div>
    </div>
</template>

<script>
// import dayjs from 'dayjs'

export default {
  name: 'ArtistPlay',
  data() {
    return {
      tableData: [],
      currentRow: null,
      artistDec: {},
      simiArtists: {},
      params: {},
      query: {},
      id: null
    }
  },
  async mounted() {
    this.resDec = await this.$API.artistplay.reqGetArtistDec(
      this.$route.query.id
    )
    this.artistDec = this.resDec.artist
    this.resSongs = await this.$API.artistplay.reqGetArtistSongs(
      this.$route.query.id
    )
    this.tableData = this.resSongs.songs
    for (let i = 0; i < this.tableData.length; i++) {
      // 获取毫秒数
      let dt = this.tableData[i].dt
      let min = parseInt(dt / 1000 / 60)
      let sec = parseInt((dt / 1000) % 60)
      if (min < 10) {
        min = '0' + min
      }
      if (sec < 10) {
        sec = '0' + sec
      }
      this.tableData[i].dt = `${min}:${sec}`
    }
    this.resSimi = await this.$API.artistplay.reqGetSimiArtist(
      this.$route.query.id
    )
    this.simiArtists = this.resSimi.artists.slice(0, 6)
    this.id = this.$route.query.id
  },
  methods: {
    handleToAnotherPlay(id) {
      // console.log('handleToAnotherPlay')
      // console.log(this.$route)
      // console.log('playid', id)
      // this.$route.query.id = id
      this.$router.push(`ArtistPlay?id=${id}`)
      // this.$router.replace({path:'/artistplay',query:{id:id}})
    },
    handleGotoPlay(row) {
      this.$router.push({ path: '/singleplay', query: { ids: row.id } })
    }
  },
  watch: {
    async '$route.query.id'() {
      // console.log('go')
      // this.id = this.$route.query.id
      // this.getMounted()
      this.resDec = await this.$API.artistplay.reqGetArtistDec(
        this.$route.query.id
      )
      this.artistDec = this.resDec.artist
      this.resSongs = await this.$API.artistplay.reqGetArtistSongs(
        this.$route.query.id
      )
      this.tableData = this.resSongs.songs
      for (let i = 0; i < this.tableData.length; i++) {
        // 获取毫秒数
        let dt = this.tableData[i].dt
        let min = parseInt(dt / 1000 / 60)
        let sec = parseInt((dt / 1000) % 60)
        if (min < 10) {
          min = '0' + min
        }
        if (sec < 10) {
          sec = '0' + sec
        }
        this.tableData[i].dt = `${min}:${sec}`
      }
      this.resSimi = await this.$API.artistplay.reqGetSimiArtist(
        this.$route.query.id
      )
      this.simiArtists = this.resSimi.artists.slice(0, 6)
      this.id = this.$route.query.id
    }
  }
  // beforeRouteEnter(to, from, next) {
  //   console.log('routerid', to.params.id)
  //   next((vm) => {
  //     this.$router.push({ name: 'ArtistPlay', params: { id: id } })
  //   })
  // },
  // beforeRouteUpdate(to, from, next) {
  //   let id = to.params.id
  //   console.log('updateid', id)
  //   // this.
  //   // 在当前路由改变，但是该组件被复用时调用
  //   next(this.$router.push({ name: 'ArtistPlay', params: { id: id } }))
  //   // next(this.$router.push({ name: 'ArtistPlay', params: { id: id } }))
  // }
}
</script>

<style scoped>
html,
body,
.bgc,
.container {
  height: 100%;
}

.bgc {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}

.container {
  width: 1000px;
  min-height: 700px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border: 1px solid #d3d3d3;
  background: white;
}

.el-table .cell {
  white-space: nowrap !important;
  overflow: hidden;
}

.nowraphidden {
  white-space: nowrap !important;
  overflow: hidden;
}

.main-img img:hover {
  cursor: pointer;
}

.songForm {
  width: 640px;
}

.zebra-gray {
  background: #f7f7f7;
}

.zebra-white,
.zebra-gray {
  display: flex;
  justify-content: space-around;
  border: 1px solid #e2e2e2;
  align-items: center;
  height: 60px;
}

.similarArtist {
  display: flex;
  flex-wrap: wrap;
}

.similarArtist .similarArtist-main {
  width: 50px;
  padding-left: 25px;
  height: 90px;
}

.similarArtist img {
  width: 50px;
  height: 50px;
}

.similarArtist p {
  text-align: center;
}

.similarArtist a {
  width: 50px;
  vertical-align: middle;
}

.artist-main {
  width: 720px;
  border: 1px solid #ccc;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  padding: 47px 30px 40px 39px;
}

.mask-alpha {
  position: absolute;
  top: 34px;
  left: 0;
  display: block;
  width: 640px;
  height: 300px;
}

.artist-img {
  width: 640px;
  height: 300px;
}

.artist-song {
  position: relative;
  zoom: 1;
  margin-top: -20px;
}

.artist-home {
  display: block;
  position: absolute;
  bottom: 18px;
  right: 116px;
  width: 96px;
  height: 32px;
  background-position: 0 -1156px;
  color: white;
  background-image: url('../../assets/images/indexImages/sprite.png');
}

.artist-sub {
  display: block;
  position: absolute;
  bottom: 18px;
  right: 20px;
  width: 76px;
  height: 32px;
  color: white;
  background-image: url('../../assets/images/indexImages/sprite.png');
  background-position: 0 -500px;
}

.artist-info {
  display: flex;
}

.artist-info h2 {
  height: 34px;
  line-height: 24px;
  font-weight: normal;
  font-size: 24px;
  color: #333;
}

.artist-info h3 {
  padding-left: 10px;
  font-size: 14px;
  line-height: 32px;
  color: #999;
  font-weight: normal;
}

.rightElements {
  width: 270px;
  /* border: 1px solid #ccc;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent; */
  padding: 10px 20px;
  padding-top: 20px;
}
.similarArtistTitle {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-weight: bold;
}
.downloadTitle {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 10px;
}
.download {
  display: flex;
  width: 70%;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}
.downloadBottom {
  padding-left: 45px;
  color: #999;
}
.updateBottom {
  display: block;
  margin-top: 20px;
  margin-left: 45px;
  padding-top: 20px;
  text-decoration: none;
}
.el-menu-demo {
  margin-top: -3px;
  width: 640px;
  height: 39px;
}
.el-menu-item {
  height: 39px;
  width: 136px;
  line-height: 39px;
  text-align: center;
}
.el-menu-item.is-active {
  border-top: 2px solid red;
  border-bottom: 0;
  background: white !important;
}
.btn-group {
  margin: 20px 0 10px;
}
.btn-play {
  width: 66px;
  height: 30px;
}
.btn-plus {
  width: 30px;
  height: 30px;
  background-color: #409eff;
  border: 0;
  color: white;
  border-radius: 10%;
}
.btn-sub {
  height: 30px;
  margin-left: 10px;
}
.btn-hot {
  height: 30px;
  margin-left: 325px;
}
.likeA:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>
